<template>
    <div class="org-info">
        <div class="org-info-title">组织信息</div>
        <div class="org-info-list">
            <a-form>
                <a-row>
                    <a-col :span="12">
                        <a-form-item filed="" label="组织名称:" label-col-flex="100px">{{orgInfo.org_name}}</a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item filed="" label="组织类型:" label-col-flex="150px">{{orgInfo.org_type}}</a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item filed="" label="联系人:" label-col-flex="100px">{{orgInfo.concat_user}}</a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item filed="" label="统一社会信用代码:" label-col-flex="150px">{{orgInfo.credit_code}}</a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item filed="" label="手机号:" label-col-flex="100px">{{orgInfo.phone}}</a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item filed="" label="注册地址:" label-col-flex="150px">{{orgInfo.address}}</a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item filed="" label="联系地址:" label-col-flex="100px">{{orgInfo.concat_address}}</a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div class="org-info-title" v-if="type === 'in'">下级列表</div>
        <div class="org-info-table table-box w-full overflow-hidden" v-if="type === 'in'">
            <a-table :columns="(columns as any)"
              :data="tableData"
              :pagination="false"
              :scroll="{ x: '100%', y: '100%' }"
              >
        </a-table>
        </div>
        <div class="page-box w-full h-[40px] overflow-hidden p-[30px_0px_20px_0]  flex justify-end items-center" v-if="type === 'in'">
          <a-pagination
            :total="page.total"
            show-total
            show-page-size
            @page-size-change="handleSizeChange"
            @change="handleCurrentChange"
          />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { org_sub_list, org_detail } from '@/api/orgManagement/orgManagement'
const props = defineProps({
  orgId: Number,
  type: String
})
watch(
  () => props.orgId,
  () => {
    if (props.orgId !== 0) {
      getOrgDetail()
      getOrgList()
    }
  }
);
watch(
  () => props.type,
  () => {
    if (props.type === 'in') {
      getOrgList()
    }
  }
);
const tableData = ref([])
const orgInfo = ref({})
const page = ref({
    page: 1,
    page_size: 10,
    total: 0
})
const columns = [
  {
    title: '组织编码',
    dataIndex: 'code',
    slotName: 'code',
    ellipsis:true,
    tooltip:true
  },
  {
    title: '组织名称',
    dataIndex: 'org_name',
    slotName: 'org_name',
    ellipsis:true,
    tooltip:true
  },
  {
    title: '组织类型',
    dataIndex: 'org_type',
    slotName: 'org_type',
    ellipsis:true,
    tooltip:true
  },
  {
    title: '联系人',
    dataIndex: 'concat_user',
    slotName: 'concat_user',
    ellipsis:true,
    tooltip:true
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    slotName: 'phone',
    ellipsis:true,
    tooltip:true
  }
]
/**
 * 
 * @param 下级组织列表
 */
const getOrgList = async() => {
    const params = {
        org_code: props.orgId,
        page: page.value.page,
        page_size: page.value.page_size
    }
    let { code, data, total } = await org_sub_list(params)
    tableData.value = data
    page.value.total = total
}
/**
 * 
 * @param 组织详情
 */
const getOrgDetail = async() => {
    let { code, data } = await org_detail({ org_code: props.orgId})
    if (code === 200) orgInfo.value = data
}
// 分页
const handleSizeChange = (e: number) => {
  page.value.page_size = e;
  getOrgList();
};
const handleCurrentChange = (e: number) => {
  page.value.page = e;
  getOrgList();
};
defineExpose({
  getOrgList
})
</script>
<style lang="less" scoped>
:deep(.arco-form-item-label) {
    color: #A3B0CC;
}
.org-info {
    padding-left: 24px;
    &-title {
        font-size: 16px;
        font-weight: 700;
        color: #394D73;
        line-height: 24px;
        padding-top: 16px;
    }
    &-list {
        background: #F7F9FC;
        border-radius: 8px;
        padding-top: 20px;
        margin-top: 16px;
    }
    &-table {
        margin-top: 16px;
        height: calc(100vh - 620px);
    }
}
</style>